<%--
  Created by IntelliJ IDEA.
  User: zqh21
  Date: 2022/9/13
  Time: 8:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>
        .div_dh {
            padding-left: 600px;
        }

        #vivo_dh {
            margin-left: 250px;
            margin-top: 10px;
            width: 1090px;
        }

        #vivo_czdh {
            margin-left: 25px;
            margin-top: -58px;
            height: 740px;
        }

        .layui-nav {
            box-shadow: 2px 2px 5px #000 inset;
        }
    </style>
</head>
<body>
<form>
    <ul class="layui-nav" id="vivo_dh">
        <div class="div_dh">
            <li class="layui-nav-item layui-this"><a href="">选中</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">常规</a>
            </li>
            <li class="layui-nav-item"><a href="">导航</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">子级</a>
                <dl class="layui-nav-child">
                    <dd><a href="">菜单1</a></dd>
                    <dd><a href="">菜单2</a></dd>
                    <dd><a href="">菜单3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">选项</a>
                <dl class="layui-nav-child">
                    <dd><a href="">选项1</a></dd>
                    <dd class="layui-this"><a href="">选项2</a></dd>
                    <dd><a href="">选项3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">演示</a></li>
        </div>
    </ul>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;" id="vivo_czdh">
        <li class="layui-nav-item">
            <a href="javascript:;">默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项一</a></dd>
                <dd><a href="javascript:;">选项二</a></dd>
                <dd><a href="javascript:;">选项三</a></dd>
                <dd><a href="">跳转项</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <script src="static/layui/layui.js"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //导航点击事件
            element.on('nav(demo)', function (elem) {
                //console.log(elem)
                layer.msg(elem.text());
            });
        });
    </script>
</form>
</body>
</html>
